<template>
    <div id="app">
        <p>{{ hours }} 小时 {{ minutes }} 分 {{ seconds }} 秒</p>
    </div>

</template>

<script>
    export default ({
        name: "countDown",
        props: {
            countDownTime: {
                type: Number,
                default: 3600
            }
        },
        data() {
            return {
                remainingTime: this.countDownTime
            }
        },
        watch: {
            countDownTime(newVal) {
                this.remainingTime = newVal;
                this.countdown(true);
            }
        },
        computed: {
            hours() {
                return Math.floor(this.remainingTime / 3600);
            },
            minutes() {
                return Math.floor((this.remainingTime % 3600) / 60);
            },
            seconds() {
                return this.remainingTime % 60;
            }
        },
        methods: {
            countdown(isStop = false) {

                var stop = setInterval(() => {
                    if (this.remainingTime > 0) {
                        this.remainingTime--;
                    }
                }, 1000);
                if (isStop) {
                    clearInterval(stop);
                    var stop = setInterval(() => {
                        if (this.remainingTime > 0) {
                            this.remainingTime--;
                        }
                    }, 1000);
                }
            }
        },
        mounted() {
            this.countdown();
        }
    });
</script>

<style scoped>

</style>